import { AfterContentInit, AfterViewInit, Directive, ElementRef, HostListener, Input } from '@angular/core';
interface Options{
  bgColor?: string
}
@Directive({
  selector: '[codeBlock]',
})
export class BlockDirective implements AfterViewInit{
  @Input("codeBlock") codeBlock: Options | any = {};
  private element: HTMLElement;
  private preStyle: any ;
  constructor(private hostRef:ElementRef) {
    this.element = hostRef.nativeElement;
  }
  ngAfterViewInit():void{
    this.element.style.backgroundColor = this.codeBlock.bgColor || "#f6f8fa";
    this.element.style.margin= "0 0 24px";
    this.element.style.padding= "8px 16px 6px 56px";
    this.element.style.border= "none";
    this.element.style.fontFamily= "Source Code Pro,DejaVu Sans Mono,Ubuntu Mono,Anonymous Pro,Droid Sans Mono,Menlo,Monaco,Consolas,Inconsolata,Courier,monospace,PingFang SC,Microsoft YaHei,sans-serif";
    this.element.style.fontSize= "14px";
    this.element.style.color= "#000";
    this.element.style.borderRadius= "4px";
    this.preStyle = this.element
  }
  @HostListener('mouseenter') enter(){
    this.element.style.backgroundColor = "#f6f8fa";
  }
  @HostListener('mouseleave') enleave(){
    this.element.style.backgroundColor = this.codeBlock.bgColor;
  }
}
